<template>
  <a-transfer
        :data-source="leftData"
        :target-keys="rightData"
        :show-search="true"
        :disabled="false"
        :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
        :show-select-all="false"
        @change="onChange"
        >
            <template
                slot="children"
                slot-scope="{
                props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                on: { itemSelectAll, itemSelect },
                }"
            >
                <a-table
                :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })"
                :columns="direction === 'left' ? leftColumns : rightColumns"
                :data-source="filteredItems"
                size="small"
                :style="{ pointerEvents: listDisabled ? 'none' : null }"
                :custom-row="({ key, disabled: itemDisabled }) => ({
                    on: {
                        click: () => {
                        if (itemDisabled || listDisabled) return;
                        itemSelect(key, !selectedKeys.includes(key));
                        },
                    },
                })"
                />
            </template>
        </a-transfer>
</template>

<script>
export default {
  data() {
    return {
      //左边数据
      leftData:[],
      //右边数据
      rightData: [],
      leftColumns: [
        { title: '品名', dataIndex: 'pinMing', key: 'pinMing', align: 'center' },
        { title: '注册证号', dataIndex: 'zhuCezh', key: 'zhuCezh', align: 'center' },
      ],
      rightColumns: [
        { title: '品名', dataIndex: 'pinMing', key: 'pinMing', align: 'center' },
      ],
    }
  },
  methods:{
      onChange(nextTargetKeys) {
      this.rightData = nextTargetKeys;
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
  }
}
</script>

<style>

</style>